<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>实验数据统计图/浓度折线图概览</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="assets/images/icon/favicon.ico">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/themify-icons.css">
    <link rel="stylesheet" href="assets/css/metisMenu.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.min.css">
    <!-- amchart css -->
    <link rel="stylesheet" href="assets/css/export.css" type="text/css" media="all"/>
    <!-- others css -->
    <link rel="stylesheet" href="assets/css/typography.css">
    <link rel="stylesheet" href="assets/css/default-css.css">
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <!-- modernizr css -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>


</head>

<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<!-- preloader area start -->
<div id="preloader">
    <div class="loader"></div>
</div>
<!-- preloader area end -->
<!-- page container area start -->
<div class="page-container">
    <!-- sidebar menu area start -->
    <div class="sidebar-menu">
        <div class="sidebar-header">
            <div class="logo">
                <a href="pages/index.html"><img src="assets/images/icon/logo.png" alt="logo"></a>
            </div>
        </div>
        <div class="main-menu">
            <div class="menu-inner">
                <nav>
                    <ul class="metismenu" id="menu">
                        <li>
                            <a href="javascript:void(0)" aria-expanded="true"><i
                                    class="ti-layout-sidebar-left"></i><span>Sidebar
                                        Types
                                    </span></a>
                            <ul class="collapse">
                                <li><a href="#">Left Sidebar</a></li>
                                <li><a href="#">Horizontal Sidebar</a></li>
                            </ul>
                        </li>
                        <li class="active">
                            <a href="javascript:void(0)" aria-expanded="true"><i
                                    class="ti-pie-chart"></i><span>Charts</span></a>
                            <ul class="collapse">
                                <li class="active"><a href="index.html">实验数据统计图/浓度折线图概览</a></li>
                                <li><a href="table_compounds.html">成分表</a></li>
                                <li><a href="experiment.html">实验数据表</a></li>
                            </ul>
                        </li>


                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <!-- sidebar menu area end -->
    <!-- main content area start -->
    <div class="main-content">
        <!-- header area start -->
        <div class="header-area">
            <div class="row align-items-center">
                <!-- nav and search button -->
                <div class="col-md-6 col-sm-8 clearfix">
                    <div class="nav-btn pull-left">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="search-box pull-left">
                        <form action="#">
                            <input type="text" name="search" placeholder="Search..." required>
                            <i class="ti-search"></i>
                        </form>
                    </div>
                </div>
                <!-- profile info & task notification -->
                <div class="col-md-6 col-sm-4 clearfix">
                    <ul class="notification-area pull-right">
                        <li id="full-view"><i class="ti-fullscreen"></i></li>
                        <li id="full-view-exit"><i class="ti-zoom-out"></i></li>
                        <li class="dropdown">
                            <i class="ti-bell dropdown-toggle" data-toggle="dropdown">
                                <span>2</span>
                            </i>

                        </li>

                        <li class="settings-btn">
                            <i class="ti-settings"></i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- header area end -->
        <!-- page title area start -->
        <div class="page-title-area">
            <div class="row align-items-center">
                <div class="col-sm-6">
                    <div class="breadcrumbs-area clearfix">
                        <h4 class="page-title pull-left">Dashboard</h4>
                        <ul class="breadcrumbs pull-left">
                            <li><a href="pages/index.html">Home</a></li>
                            <li><span>Bar Chart</span></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <!-- page title area end -->
        <div class="main-content-inner">
            <!-- bar chart start -->
            <div class="row">
                <div class="col-lg-6 mt-5">
                    <div class="card">
                        <div class="card-body">
                            <div class="dropdown col-lg-6 col-md-4 col-sm-6">
                                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"
                                        aria-expanded="false" id="c_name_01_1">
                                    请选择成分名
                                </button>
                                <div id="selection_1" class="dropdown-menu" x-placement="bottom-start"
                                     style="height:300px;overflow:auto;position: absolute; transform: translate3d(15px, 43px, 0px); top: 0px; left: 0px; will-change: transform;">

                                </div>

                            </div>
                            <p class="text-primary">成分：<b><em><span id="c_name_01"></span></em></b>-计算后的浓度图表：</p>

                            <div id="ambarchart1"></div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 mt-5">
                    <div class="card">
                        <div class="card-body">
                            <div class="dropdown col-lg-6 col-md-4 col-sm-6">
                                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"
                                        aria-expanded="false" id="c_name_02_2">
                                    请选择成分名
                                </button>
                                <div id="selection_2" class="dropdown-menu" x-placement="bottom-start"
                                     style="height:300px;overflow:auto;position: absolute; transform: translate3d(15px, 43px, 0px); top: 0px; left: 0px; will-change: transform;">
                                </div>

                            </div>
                            <p class="text-primary">成分：<b><em><span id="c_name_02"></span></em></b>不同浓度的精确度图表：</p>

                            <div id="amlinechart5"></div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- bar chart end -->
        </div>
    </div>
    <!-- main content area end -->
    <!-- footer area start-->
    <footer>

    </footer>
    <!-- footer area end-->
</div>
<!-- page container area end -->

<!-- jquery latest version -->
<script src="assets/js/vendor/jquery-2.2.4.min.js"></script>
<!-- bootstrap 4 js -->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/metisMenu.min.js"></script>
<script src="assets/js/jquery.slimscroll.min.js"></script>
<script src="assets/js/jquery.slicknav.min.js"></script>
<!-- start chart js -->
<script src="assets/js/Chart.min.js"></script>
<!-- start highcharts js -->
<script src="assets/js/highcharts.js"></script>
<!-- start zingchart js -->
<script src="assets/js/zingchart.min.js"></script>
<script>
    zingchart.MODULESDIR = "assets/js/modules/";
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
</script>
<!-- start amchart js -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<!--<script src="assets/css/export.min.js"></script>-->
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<script src="js/chat-maker.js"></script>
 <!--all line chart activation -->
<!--<script src="assets/js/line-chart.js"></script>-->
<!--&lt;!&ndash; all bar chart activation &ndash;&gt;-->
<!--<script src="assets/js/bar-chart.js"></script>-->
<!--&lt;!&ndash; all pie chart &ndash;&gt;-->
<!--<script src="assets/js/pie-chart.js"></script>-->
<!-- others plugins -->
<script src="assets/js/plugins.js"></script>
<script src="assets/js/scripts.js"></script>


<script>
    $(function () {

        $.ajax({

            url: "http://localhost:8080/quantitative/getComponentNames",
            dataType: "text json",
            type: "get",
            async: false,
            statusCode: {
                200: function (data) {
                    $("#selection_1").empty()
                    $(data).each(function (i, v) {
                        str = "<a class='dropdown-item' onclick='mkChart_1(\"" + v.toString() + "\")'>" + v + "</a>"
                        $("#selection_1").append(str)

                    })
                }
            }
        })

        $.ajax({

            url: "http://localhost:8080/marking/getComponentNames",
            dataType: "text json",
            type: "get",
            async: false,
            statusCode: {
                200: function (data) {
                    $("#selection_2").empty()
                    $(data).each(function (i, v) {
                        str = "<a class='dropdown-item' onclick='mkChart_2(\"" + v.toString() + "\")'>" + v + "</a>"
                        $("#selection_2").append(str)

                    })
                }
            }
        })

    })


</script>

</body>

</html>
